<template>
  <div class="tank-top">
    <img src="../public/pic/logo.jpg" alt="" class="logo">
  </div>
  <div class="case">
    <div class="menum">
       <h2 class="mb-2">VUE-THINK-TANK</h2>
        <el-tree :data="data" class="tree" :props="defaultProps" @node-click="handleNodeClick" />
      </div>
    <div class="content">
      <!-- <RouterView></RouterView> -->
      <router-view v-slot="{Component}">
           <component :is="Component"></component>
       </router-view>
    </div>
  </div>
 </template>
<script  setup>
 import { getCurrentInstance } from 'vue';
 const {proxy}=getCurrentInstance();
  const handleNodeClick = (data) => {    
  proxy.$router.push({path:data.path})
}
const data=[
  {
    label: 'Expianation Message',
    path:''
  },
  {
    label: '动态组件',
    path:'/DynamicComponent'
  },
  {
    label: '插槽(Slot)',
    path:'/Slot'
  },
  {
    label: 'Vue Router',
    children: [
      {
        label: '路由守卫&动态路由&编程式路由',
        path:'/VueRouter'
      },
    ],
  },
  {
    label: 'API',
    children: [
      {
        label: '选项式应用程序接口(Option API)',
        path:'/OptionAPI'
      },
      {
        label: '组合式应用程序接口(CompositionAPI)',
        path:'/CompositionAPI'
      },
      {
        label: 'NextTick()',
        path:'/NextTick'
      },
    ],
  },
  {
    label: 'Lifecycle & Related Hooks',
    children: [
      {
        label: 'WithData(选项式钩子函数)',
        path:'/WithData'
      },
      {
        label: 'WithRef(组合式钩子函数)',
        path:'/WithRef'
      },
      {
        label: 'KeepAlive & 路由嵌套',
        path:'/KeepAlive'
      },
    ],
  },
  {
    label: '指令(Directive)',
    path:'/Directive'
  },
  {
    label: 'Watch & Computed',
    path:'/WatchComputed'
  },
  {
    label: '全局属性(Global Properties)',
    path:'/GlobalProperties'
  },
  {
    label: 'Third-party UI Libaries',
    children:[
      {
        label:'ElementPlus(案例)',
        path:'/ElementPlus'
      }
    ]
  },
  {
    label: '组件间通信',
    children:[
      {
        label:'父传子',
        path:'/DefineProps'
      },
      {
        label:'子传父',
        path:'/DefineEmits'
      },
      {
        label:'父组件调用子组件的函数',
        path:'/CommFunc',
      },
      {
        label:'Pinia状态管理',
        path:'/Pinia',
      },
    ]
  },
  {
        label:'Promise 对象',
        children:[
        { 
         label:'Promise 对象',
         path:'/Promise'
        },
        {
          label:'Promise 语法',
          path:'/PromiseGrammar'
        }
        ]
  },
  {
    label: '接口请求 / 异步(Async)',
    children:[
      {
       label:'Axios接口请求',
       path:'/Axios',
      },
      {
       label:'Axios 二次封装',
       path:'/AxiosPostpackaging',
      }
    ]
  },
  {
    label: '防抖和节流(Debounce & Throttle)',
    path:'/DebounceAndThrottle'
  },
]
const defaultProps = {
  children: 'children',
  label: 'label',
  path:'path'
}
</script> 
<style> 
.tank-top {
  height: 40px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
}
.tank-top .logo {
  height: 40px;
  padding-left: 10px;
}
a{
  text-decoration: none;
  color: black;
}
.case{
  display: flex;
  min-height: calc(100vh - 40px);
}
.menum{
 flex:0 0 22%;
 border: 1px solid #ddd;
 background-color:    #f4f4f5; 
}
.content{
  min-width: 20%;
  flex:0 0 78%;
}
.menum h2{
  padding-left: 18px;
}
.el-tree-node {
  margin:12px;
  font-size: 16px;
}
/* .el-tree{
 background-color: #f4f4f5; 
} */
.tree{
  background:#f4f4f5 !important; 
} 

button{
    border: 0;
    border: 1px solid #103f91;
    color: #fff;
    background-color: #007ccc;
    padding: 2px 5px;
    margin: 10px 0;
    display: block;
    cursor: pointer;
}
.title {
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}
.unitBar {
    margin: 20px;
}

.inner {
    margin: 0 40px;
}
</style>
